<template>
  <v-app>
    <!-- App Bar (Top Navigation) -->
    <v-app-bar color="black" dense dark app>
      <v-toolbar-title style="font-family: Verdana, Geneva, Tahoma, sans-serif;">
        西电宠物殡葬服务中心
      </v-toolbar-title>

      <v-spacer></v-spacer>

      <!-- Navigation Buttons -->
      <v-btn depressed style="margin-right: 10px; font-family:'Courier New', Courier, monospace" @click="jumpToPreaserve">
        预约服务
        <v-icon>mdi-access-point</v-icon>
      </v-btn>
      
      <v-btn depressed style="margin-right: 10px; font-family:'Courier New', Courier, monospace" @click="jumpToMemoryShop">
        记录商城
        <v-icon>mdi-store</v-icon>
      </v-btn>
    
      <v-btn depressed style="margin-right: 10px; font-family:'Courier New', Courier, monospace"  @click="jumpToLivingDocument">
        生命档案
        <v-icon>mdi-file-document</v-icon>
      </v-btn>

      <!-- Login/Quit Menu -->
      <v-menu offset-y>
        <template v-slot:activator="{ on, attrs }">
          <v-btn color="primary" dark v-bind="attrs" v-on="on">
            login/quit
          </v-btn>
        </template>
        <v-list>
          <v-list-item>
            <v-btn color="secondary" dark>修改密码</v-btn>
          </v-list-item>
          <v-list-item>
            <v-btn color="warning" dark @click="quitLogin">退出登录</v-btn>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>

    <!-- Main Content -->
    <v-main class="mx-auto text-center">
      <v-row style="margin-top: 100px;">
        <!-- Left Column: Info Card -->
        <v-col cols="12" md="6">
          <v-card max-width="344" class="mt-15 mr-10">
            <v-img
              src="https://tse2-mm.cn.bing.net/th/id/OIP-C.pTQL3PFUb98qNVLI0t7hagHaEu?rs=1&pid=ImgDetMain"
              height="200px"
            ></v-img>
            <v-card-title>每一只逝去的生灵得以安息</v-card-title>
            <v-card-subtitle>我们将保证善待您的宠物</v-card-subtitle>
            <v-card-actions>
              <v-btn color="orange lighten-2" text>了解更多</v-btn>
              <v-spacer></v-spacer>
              <v-btn icon @click="show = !show">
                <v-icon>{{ show ? 'mdi-chevron-right' : 'mdi-chevron-left' }}</v-icon>
              </v-btn>
            </v-card-actions>
            <v-slide-x-transition>
              <div v-show="show">
                <v-divider></v-divider>
                <v-card-text>
                  Pet funeral services are a growing aspect of animal care, reflecting the deep bond between humans and their pets. 
                </v-card-text>
              </div>
            </v-slide-x-transition>
          </v-card>
        </v-col>

        <!-- Right Column: Testimonial Card -->
        <v-col cols="12" md="6">
          <v-card color="#26c6da" dark max-width="400" class="mt-15 ml-13">
            <v-card-title>
              <v-icon large left>mdi-twitter</v-icon>
              <span class="text-h6 font-weight-light">Twitter</span>
            </v-card-title>
            <v-card-text class="text-h5 font-weight-bold">
              "It's a very user-friendly and affordable business"
            </v-card-text>
            <v-card-actions>
              <v-list-item class="grow">
                <v-list-item-avatar color="grey darken-3">
                  <v-img
                    class="elevation-6"
                    alt=""
                    src="https://avataaars.io/?avatarStyle=Transparent&topType=ShortHairShortCurly&accessoriesType=Prescription02&hairColor=Black&facialHairType=Blank&clotheType=Hoodie&clotheColor=White&eyeType=Default&eyebrowType=DefaultNatural&mouthType=Default&skinColor=Light"
                  ></v-img>
                </v-list-item-avatar>
                <v-list-item-content>
                  <v-list-item-title>Evan</v-list-item-title>
                </v-list-item-content>
                <v-row>
                  <v-icon class="mr-1">mdi-heart</v-icon>
                  <span class="subheading mr-2">256</span>
                  <span class="mr-1">·</span>
                  <v-icon class="mr-1">mdi-share-variant</v-icon>
                  <span class="subheading">45</span>
                </v-row>
              </v-list-item>
            </v-card-actions>
          </v-card>
        </v-col>
      </v-row>
    </v-main>

    <!-- Bottom Navigation -->
    <v-bottom-navigation v-model="value" color="black" dense dark app>
      <v-btn value="recent" class="mt-2 mr-5">
        <span>关于我们</span>
        <v-icon>mdi-history</v-icon>
      </v-btn>
  
      <v-btn value="favorites" class="mt-2 mr-5">
        <span>支持一下</span>
        <v-icon>mdi-heart</v-icon>
      </v-btn>
  
      <v-btn value="nearby" class="mt-2 mr-5">
        <span>客户中心</span>
        <v-icon>mdi-map-marker</v-icon>
      </v-btn>
    </v-bottom-navigation>

    <!-- Loading Overlay -->
    <v-overlay :value="isLoading" color="black">
      <v-progress-circular indeterminate size="64" color="primary"></v-progress-circular>
    </v-overlay>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    collapseOnScroll: true,
    items: [
      { title: '修改密码' },
      { title: '退出登录' },
    ],
    loading: false,
    selection: 1,
    show: false,
    value: '',
    isLoading: false, 
  }),
  methods: {
    reserve() {
      this.loading = true;
      setTimeout(() => (this.loading = false), 2000);
    },
    jumpToPreaserve() {
      this.isLoading = true; 
      setTimeout(() => {
        this.$router.push('/preserve'); 
        this.isLoading = false; 
      }, 1000); 
    },
    jumpToMemoryShop(){
      this.isLoading=true;
      setTimeout(()=>{
        this.$router.push('/memory');
        this.isLoading =false;
      },1000);
    },
    jumpToLivingDocument(){
      this.isLoading=true;
      setTimeout(()=>{
        this.$router.push('/memory');
        this.isLoading =false;
      },1000);
    },
    quitLogin(){
      this.isLoading=true;
      setTimeout(()=>{
        this.$router.push('/login');
        this.isLoading =false;
      },1000);
    },
  },
};
</script>

<style scoped>
/* You can keep your custom styles here if needed */
</style>